<template>
    <div>
        <!-- 企业直招 -->
        <div id="company-recruit">
            <div class="company-box">
                <p class="title1">企业直招</p>
                <p class="title2">技能 匹配优质人才</p>
                <p class="title3">下载码上优聘App</p>
                <div class="download-btn" @mouseover="show(1)" @mouseout="show(0)">下载App</div>
                <div class="check-ewm-box">
                    <div class="check-ewm" :class="{hewm:showewm != 1}">
                        <img src="../assets/companyDetail/正三角形.png" alt="">
                        <div class="ewm">
                            <img src="../assets/code.png" alt="" style="width:124px">
                        </div>
                    </div>
                </div>
            </div>
            <img class="pic_white" src="../assets/appPage/pic_white.png" alt="">
            <img class="pic_phone" src="../assets/appPage/pic_phone.png" alt="">
        </div>
        <!-- 搜索技能标签 -->
        <div style="width: 1920px;">
            <div id="kill-label">
                <div class="label-incrit img-right">
                    <img class="pic_search" src="../assets/appPage/pic_search.png" alt="">
                </div>
                <div class="label-incrit">
                    <p class="label-title">搜索技能标签</p>
                    <p class="label-text">企业直接搜索想要的技能人才，直接找到相关技能，提高招聘效率</p>
                    <div class="download-btn" @mouseover="show(2)" @mouseout="show(0)">下载App</div>
                    <div style="position:absolute;top:262px;">
                        <div class="check-ewm-box">
                            <div class="check-ewm" :class="{hewm:showewm != 2}">
                                <img src="../assets/companyDetail/正三角形.png" alt="">
                                <div class="ewm">
                                    <img src="../assets/code.png" alt="" style="width:124px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="company-label">
                <div class="label-incrit">
                    <p class="label-title">企业直接招聘</p>
                    <p class="label-text">企业直接搜索想要的技能人才，直接找到相关技能，提高招聘效率</p>
                    <div class="download-btn" @mouseover="show(3)" @mouseout="show(0)">下载App</div>
                    <div style="position:absolute;top:262px;">
                        <div class="check-ewm-box">
                            <div class="check-ewm" :class="{hewm:showewm != 3}">
                                <img src="../assets/companyDetail/正三角形.png" alt="">
                                <div class="ewm">
                                    <img src="../assets/code.png" alt="" style="width:124px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="label-incrit img-left">
                    <img class="pic_hire" src="../assets/appPage/pic_hire.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<style>
/* 企业直招 */
#company-recruit{
    height: 900px;
    width: 1920px;
    background: linear-gradient(135deg, #1136D8 0%, #101C94 100%);
    position: relative;
    padding-top: 212px;
    box-sizing: border-box;
}

#company-recruit .pic_white{
    position: absolute;
    top: 566px;
}

#company-recruit .pic_phone{
    position: absolute;
    top: 62px;
    left: 754px;
}

#company-recruit .title1{
    color: white;
    font-size: 36px;
    letter-spacing: 1px;
    font-weight: bold;
}

#company-recruit .title2{
    color: white;
    font-size: 32px;
    margin-top: 24px;
}

#company-recruit .title3{
    color: white;
    font-size: 20px;
    margin-top: 69px;
}

.download-btn{
    color: white;
    font-size: 16px;
    width: 138px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: linear-gradient(132deg, #FF9F6E 0%, #FB734A 100%);
    border-radius: 22px;
    margin-top: 14px;
}

#company-recruit .company-box{
    margin-left: 368px;
}

/* 搜索技能标签 */
#kill-label{
    width: 1182px;
    margin: 0 auto;
    padding: 150px 0;
    box-sizing: border-box;
}

#company-label{
    width: 1182px;
    margin: 0 auto;
    padding: 150px 0;
    box-sizing: border-box;
}

.label-incrit{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    position: relative;
}

.label-title{
    font-size: 36px;
    font-weight: bold;
}

.label-text{
    color: #646A7E;
    font-size: 16px;
    line-height: 36px;
    width: 419px;
    margin-top: 50px;
    margin-bottom: 24px;
}

.img-left{
    margin-left: 200px;
}

.img-right{
    margin-right: 200px;
}

.label-incrit img{
    width: 561px;
}

/* 二维码 */
.check-ewm-box{
    position: absolute;
    box-shadow: 0px 2px 8px 0px rgba(67, 72, 81, 0.15);
    background-color: white;
    border-radius: 6px;
    z-index: 1000;
}

#company-recruit .check-ewm-box{
    top: 500px;
    left: 366px;
}

.check-ewm-box .check-ewm{
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

.check-ewm-box .check-ewm div{
    width: 144px;
    height: 146px;
    background-color: white;
}

.check-ewm-box .check-ewm img{
    width: 10px;
    position: absolute;
    top: -7px;
    left: 114px;
}

.check-ewm-box .check-ewm .ewm{
    width: 124px;
    height: 124px;
    background-color: #E3E6EA;
}

.check-ewm-box .check-ewm .ewm img{
    top: 10px;
    left:10px
}

.hewm{
    display: none;
}

.sewm{
    display: block;
}
</style>
<script>
export default {
    name:'appPage',
    data() {
        return {
            showewm:0
        }
    },
    methods: {
        show(index){
            this.showewm = index;
        }
    },
}
</script>
